import React, { PureComponent } from "react";
import { AutoComplete } from "antd";
const { Option } = AutoComplete;

class JAutoComplete extends PureComponent {
  constructor() {
    super();
    this.state = {
      result: []
    };
  }
  handleSearch = value => {
    let result;
    if (!value || value.indexOf("@") >= 0) {
      result = [];
    } else {
      if (this.props.type === "user") {
        result = ["业户1", "业户2", "业户3"].map(
          domain => `${value}的${domain}`
        );
      } else if (this.props.type === "carno") {
        result = ["陕A33", "陕A44", "陕A55"].map(domain => `${domain}${value}`);
      }
    }
    this.setState({ result });
  };
  render() {
    const { result } = this.state;
    const children = result.map(ev => <Option key={ev}>{ev}</Option>);
    return (
      <AutoComplete
        style={{ width: 200 }}
        onSearch={this.handleSearch}
        placeholder={this.props.placeholder}
        style={{
          width: "calc(100% - 40px)",
          marginTop: "10px",
          width: "-webkit-fill-available"
        }}
      >
        {children}
      </AutoComplete>
    );
  }
}

export default JAutoComplete;
